<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            background-color: #fff;
        }

        .nav {
            color: #333;
            font-size: 18px;
            text-align: center;
            padding: 12px 10px;
        }

        .left-icon {
            width: 22px;
            float: left;
        }


        .list {
            padding: 10px;
            display: flex;
            justify-content: space-between;
        }

        .list .list-half {
            width: calc(50% - 4px);
            padding: 2px;
            box-sizing: border-box;
        }


        .list-half .item {
            overflow: hidden;
            margin-bottom: 30rpx;
            width: 100%;
            height: auto;
            display: block;
            border-radius: 10px;
            position: relative;
        }
        .item .img{
            width: 100%;
        }
        #no_more{
            text-align: center;
        }


        /* .item::after{
          position: absolute;
          height: 30px;
          line-height: 30px;
          width: 30px;
          text-align: center;
          background-color: #000;
          color: #fff;
          top: 10px;
          left: 10px;
          content: counter(itemCount);
        } */
        .coin {
            position: absolute;
            left: 11px;
            top: 11px;
        }

        .info {
            width: calc(100% - 20px);
            padding: 5px 10px;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .msg {
            color: #FCFBFB;
            font-size: 13px;
        }

        .las {
            margin-top: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .lal {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .lal span {
            color: #FAF9F9;
            font-size: 10px;
            margin-left: 5px;
        }

        .tou {
            width: 25px;
            height: 25px;
            border-radius: 100px;

        }

        .btn {
            width: 55%;
            display: block;
            margin: 0 auto;
            font-size: 14px;
            color: #525252;
            border-radius: 100px;
            padding: 10px 0;
            background: #f2f3f3;
        }
        .uimg{
            position: relative;
        }
        .dot-online{
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #4cd964;
            right: 0px;
            top: 3px;
        }
        .dot-offline{
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #dbdbdb;
            right: 0px;
            top: 3px;
        }
    </style>
</head>

<body>
<div id="view" v-cloak>
    <div class="list">
        <div class="list-half">
            <div class="item" v-for="(m,index) in ffList" :key="m.id" v-if="index%2 !== 0" @click.stop="_url({id: m.id, type: type}, 'zhibo/zhibo')">
                <img :src="returnImg(m.cover_url)" class="img">
                <div class="info">
                    <p class="msg">{{m.desc.length > 11 ? m.desc.slice(0, 11) + '...' : m.desc }}</p>
                    <div class="las">
                        <div class="lal">
                            <div class="uimg">
                                <img :src="returnImg(m.user.head_portrait)" class="tou"/>
                                <span class="dot-online" v-if="m.user.is_online"></span>
                                <span class="dot-offline" v-else></span>
                            </div>
                            <span>{{m.user.name}}</span>
                        </div>
                        <div class="lal">
                            <img src="../image/zhibo/bofang.png" class="bofang"/>
                            <span>{{m.play_times}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="list-half">
            <div class="item" v-for="(m,index) in ffList" :key="m.id" v-if="index%2 === 0" @click.stop="_url({id: m.id, type: type}, 'zhibo/zhibo')">
                <img :src="returnImg(m.cover_url)" class="img">
                <div class="info">
                    <p class="msg">{{m.desc.length > 11 ? m.desc.slice(0, 11) + '...' : m.desc }}</p>
                    <div class="las">
                        <div class="lal">
                            <div class="uimg">
                                <img :src="returnImg(m.user.head_portrait)" class="tou"/>
                                <span class="dot-online" v-if="m.user.is_online"></span>
                                <span class="dot-offline" v-else></span>
                            </div>
                            <span>{{m.user.name}}</span>
                        </div>
                        <div class="lal">
                            <img src="../image/zhibo/bofang.png" class="bofang"/>
                            <span>{{m.play_times}}</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div id="no_more"></div>


</div>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery.js"></script>
<script type="text/javascript" src="../script/ffkj.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
    var view = new Vue({
        el: '#view',
        data: {
            type: 1,
            ffList: []
        },
        methods: {
            _url(param, url) {
                _url(param, url);
            },
            // 返回图片路径
            returnImg(url) {
                return returnImg(url);
            },
        }
    })
    apiready = function () {
        view.my = api.pageParam['my'] || 0;
        view.type = api.pageParam['index'] || 1;
        _shangla(function () {
            getData(0);
        })

        _scrollToBottom(function () {
            if (heigutgao == 1) {
                pagenum++;
                getData(pagenum)
            }
        })
    }

    // 获取数据
    function getData(page) {
        var param = {
            user_id: $api.getStorage('userid'),
            type: view.type,
            latitude: $api.getStorage('lat'),
            longitude: $api.getStorage('lon')
        }
        console.log(JSON.stringify(param));
        var loading = page == 0 ? 1 : 0;
        _lists('api/video/index', page, loading, param)
    }
</script>
</body>

</html>